<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<meta name="x5-orientation" content="portrait" />
	<meta name="x5-fullscreen" content="true" />
	<meta name="screen-orientation" content="portrait" />
	<meta name="full-screen" content="yes" />
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/layer_mobile.css"/>
	<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
	<link rel="stylesheet" type="text/css" href="css/personal_details.css"/>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/vue1.0.js"></script>
	<script type="text/javascript" src="js/layer_mobile.js"></script>
    <script src="js/mobileSelect.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<title>个人信息</title>
</head>
<body>
	<!-- header_头部 -->
	<header>
		<p>
			<a href="javascript:;"></a>
			<i>个人信息</i>
		</p>
	</header>
	<!-- section_骨架 -->
	<section>
		<ul v-cloak>
			<li>
				<div>
					<i>我的头像</i>
					<img src="images/icon/icon_32.png" alt="" />
					<input type="file" id="userface" onchange="preview(this)" style="opacity:0;width:9rem;">
					<span>
						<div id="preview">
					<!--		<img src="images/photo.png" alt="" />-->
						</div>
					</span>			
				</div>
			</li>
			<li>
				<div>
					<i>我的昵称</i>
					<input class="name" type="text" value="{{dott.userNickname}}">
				</div>
			</li>
			<li>
				<div>
					<i>性别</i>
					<img src="images/icon/icon_32.png" alt="" />
					<strong class="sex">{{dott}}</strong>
				</div>
			</li>
			<li>
				<div>
					<i>年龄</i>
					<img src="images/icon/icon_32.png" alt="" />
					<strong class="age"> {{dott.age}}</strong>
				</div>
			</li>
		</ul>
	</section>
</body>
</html>
<script>
	function trim(str){ 
		return str.replace(/(^\s*)|(\s*$)/g, ""); 
	} 
	$("#userface").change(function () {
		var formData = new FormData();
		var fileObj = document.getElementById("userface").files[0];
		formData.append("imageFile",fileObj);
			  $.ajax({
			   url: site+'/up/upload?backet='+2,
			   type: 'post',
			   data:formData,
			   dataType:'json',
			   processData: false,
			   contentType: false,
			   async:false,
			   success: function (msg) {
			   		console.log(msg.data)
			   		var src = msg.data.src
				   	$.ajax({
					 	type:"post",
					 	url:site+"/user/changeInfo",
					 	dataType:'json',
					 	data:{userId:loca_fetch('userid'),userImage:src},
					 	success:function(data){
					 		console.log(data)
					 	}
					});
				}
		  	});
		});
	 function preview(file) {
	  var prevDiv = document.getElementById('preview');
	  if (file.files && file.files[0]) {
	   var reader = new FileReader();
	  	reader.onload = function (evt) {
	   	prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
	   }
	   reader.readAsDataURL(file.files[0]);
	  }
	}
	//修改资料
	var num = 121;
	var indexArr
	var s = []
	for(var i = 0;i<num;i++){
		s.push(i) 
	}
	$(function(){
		var mobileSelect1 = new MobileSelect({
		    trigger: '.sex', 
		    wheels:  [
                    {data:[	
                        {
                            id:'0',
                            value:'男',
                        },
                        {
                            id:'1',
                            value:'女',
                        },
                        {
                            id:'2',
                            value:'保密',
                        },

                    ]}
                ], 
		    position:[0], //初始化定位
		    callback:function(indexArr, data){
		    	loca_save('sex',indexArr.toString())
        	}
		});
		var mobileSelect1 = new MobileSelect({
		    trigger: '.age', 
		    wheels: [
		                {data:s,}
		            ],
		    position:[20], //初始化定位
		    callback:function(indexArr, data){
            	console.log(data);
        	}
		});
		$.ajax({
			type:"get",
			url:site+"/user/find",
			dataType:'json',
			data:{userId:loca_fetch('userid'),},
			beforeSend:function(){
				$('body').css({'display':'none'})
				$("body").append('<div id="pload" style="position:fixed;top:40%;z-index:1200;background:url(images/icon/loading-2.gif) top center no-repeat;width:100%;height:142px;margin:auto auto;"></div>');  
			},
          	complete: function () {  
               $("#pload").remove();  
               $('body').css({'display':'block'})
            }, 
			success:function(data){
				var datas = data.data
				console.log(datas)
				$('.top_contit').append('<p class="phone">'+datas.phone+'</p>')
				var str=$('.phone').text();  
				var str2 = str.substr(0,3)+"****"+str.substr(7);  //影藏手机号4位
				$('.phone').text(str2)
				if(datas.userSex == '0'){
					var vue = new Vue({
						el:'.sex',
						data:{
							dott:'男',
						},

					})
				}else if(datas.userSex == '1'){
					var vue = new Vue({
						el:'.sex',
						data:{
							dott:'女',
						},

					})
				}else{
					var vue = new Vue({
						el:'.sex',
						data:{
							dott:'保密',
						},

					})
				}
				
				if(datas.userImage == 'http://p28aajnzd.bkt.clouddn.com/user.jpg'){
					$('#preview').append('<img src="images/photo.png" />')
				}else{
					$('#preview').append('<img src="'+datas.userImage+'" />')
				}	
				var vue = new Vue({
					el:'section',
					data:{
						dott:datas,
					},
				})			
				trim($('.age').text())
			}	
			
		});
		$('header a').on('click',function(){
			$.ajax({
				url:site+'/user/detile',
				type:'post',
				dataType:'json',
				data:{userId:loca_fetch('userid'),userNickname:$('.name').val(),userSex:loca_fetch('sex'),age:$('.age').text()},
				success:function(data){
					console.log(data)
					alerts(data.msg)
					location.href="personal_center.html"
				}
			})
		})
	})
</script>